import { ref, onMounted } from 'vue'
import { useRoute, onBeforeRouteUpdate } from 'vue-router'
import { reqCategoryListData } from '@/apis/category'

export function useCategory() {
	const route = useRoute()
	const categoryData = ref({})

	async function getCategoryData(id = route.params.id) {
		try {
			const res = await reqCategoryListData(id)
			categoryData.value = res.result
		} catch (error) {
			ElMessage({
				type: 'error',
				message: error.response?.data?.msg,
			})
		}
	}

	// 在当前路由改变，但是该组件被复用时调用
	// 举例来说，对于一个带有动态参数的路径 `/users/:id`，在 `/users/1` 和 `/users/2` 之间跳转的时候，
	// 由于会渲染同样的 `UserDetails` 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
	onBeforeRouteUpdate(to => {
		getCategoryData(to.params.id)
	})

	onMounted(() => {
		getCategoryData()
	})

	return {
		categoryData,
	}
}
